{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<div
  {{did-insert (perform this.fetchOptions)}}
  {{did-update (perform this.fetchOptions) (or @options @models)}}
  id={{@id}}
  class="field search-select {{if @displayInherit 'display-inherit'}}"
  data-test-component="search-select"
  ...attributes
>
  {{#if this.shouldUseFallback}}
    {{component
      @fallbackComponent
      id=@id
      label=@label
      subText=@subText
      onChange=@onChange
      inputValue=@inputValue
      helpText=@helpText
      placeholder=@placeholder
    }}
  {{else}}
    {{#if @label}}
      <div class="label-row">
        <label for={{@id}} class={{@labelClass}} data-test-field-label>
          {{@label}}
        </label>
        {{#if @helpText}}
          <Hds::TooltipButton
            @text={{@helpText}}
            class={{@labelClass}}
            aria-label="More information"
            data-test-tooltip="search-select"
          >
            <Hds::Icon @name="info" />
          </Hds::TooltipButton>
        {{/if}}
      </div>
    {{/if}}
    {{#if @subText}}
      <p class="sub-text">{{@subText}}</p>
    {{/if}}
    {{#unless this.hidePowerSelect}}
      <PowerSelect
        @eventType="click"
        @placeholder={{@placeholder}}
        @searchEnabled={{this.searchEnabled}}
        @search={{this.searchAndSuggest}}
        @options={{this.dropdownOptions}}
        @onChange={{this.selectOrCreate}}
        @placeholderComponent={{component "search-select-placeholder"}}
        @renderInPlace={{true}}
        @verticalPosition="below"
        @disabled={{@disabled}}
        @ariaLabel={{or @ariaLabel @label (humanize @id)}}
        as |option|
      >
        {{#if this.shouldRenderName}}
          {{get option this.nameKey}}
          <small class="search-select-list-key" data-test-smaller-id="true">
            {{get option this.idKey}}
          </small>
        {{else}}
          {{get option this.idKey}}
        {{/if}}
      </PowerSelect>
    {{/unless}}
    <ul class="search-select-list">
      {{#each this.selectedOptions as |selected index|}}
        <li class="search-select-list-item has-text-grey-light" data-test-selected-option={{index}}>
          {{#if (and this.shouldRenderName (get selected this.nameKey))}}
            {{get selected this.nameKey}}
            <small class="search-select-list-key" data-test-smaller-id={{index}}>
              {{get selected this.idKey}}
            </small>
          {{else}}
            <div class="list-item-text has-right-margin-4 text-overflow-ellipsis">
              {{selected.id}}
              {{#if @wildcardLabel}}
                {{#if (is-wildcard-string selected.id)}}
                  {{#let (filter-wildcard selected this.allOptions) as |wildcardCount|}}
                    <Hds::Badge
                      @text="includes {{pluralize wildcardCount @wildcardLabel}}"
                      data-test-count={{wildcardCount}}
                    />
                  {{/let}}
                {{/if}}
              {{/if}}
            </div>
          {{/if}}
          <div class="control">
            {{#if selected.addTooltip}}
              <Hds::TooltipButton
                @text={{selected.addTooltip}}
                aria-label="More information"
                data-test-tooltip="search-select"
              >
                <Hds::Icon @name="info" />
              </Hds::TooltipButton>
            {{/if}}
            <Hds::Button
              @icon="trash"
              @text="delete selection"
              @isIconOnly={{true}}
              @color="tertiary"
              data-test-selected-list-button="delete"
              {{on "click" (fn this.discardSelection selected)}}
            />
          </div>
        </li>
      {{/each}}
    </ul>
    {{#if (has-block)}}
      {{yield}}
    {{/if}}
  {{/if}}
</div>